<template>
  <div class="toast">{{ toastMessage }}</div>
</template>
<script>
import { reactive, toRefs } from "vue"

export const useToastEffect = () => {
  const toastData = reactive({
    show: false,
    toastMessage: ""
  });
  const showToast = (msg) => {
    toastData.show = true
    toastData.toastMessage = msg
    setTimeout(() => {
      toastData.show = false
      toastData.toastMessage = ""
    }, 2000);
  };
  return {
    ...toRefs(toastData),
    showToast
  };
};

export default {
  data() {
    return {}
  }
};
</script>

<style lang="scss" scoped>
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.3rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 0.05rem;
  color: #000;
}
</style>
